<template>
  <div class="registe-main">
    <!--公司信息-->
    <div class="company">
      <span style="font-size: 30px">{{$t('register.company')}}</span>
      <div class="company-detail">
        <div style="width:805px;height:75px;margin-left: 45px; display:flex;flex-direction: row ">
          <div style="width:350px;height:75px;">
            <span style="font-size: 12px;font-weight: 500;color:#4A4A4A">{{$t('register.companyName')}}</span>
            <input type="text" id="company" name="company" class="input-max" maxlength="100" disabled
                   v-model="accountInfo.company"/>
          </div>
          <div style="width:211px;height:75px;margin-left:52px;" class="detail-select">
            <span style="font-size: 12px;font-weight: 500;color: #000000">{{$t('register.country')}}</span>
            <input type="text" id="country" name="country" class="input-max" maxlength="100" disabled
                   v-model="accountInfo.country"/>
          </div>
        </div>
        <div style="width:805px;height:75px;margin-left: 45px; display:flex;flex-direction: row;margin-top: 25px">
          <div style="width:350px;height:75px;">
            <span style="font-size: 12px;font-weight: 500;color:#4A4A4A">{{$t('register.location')}}</span>
            <input type="text" id="area" name="area" class="input-max" maxlength="100" disabled
                   v-model="accountInfo.location"/>
          </div>
        </div>
        <div style="width:805px;height:75px;margin-left: 45px; display:flex;flex-direction: row;margin-top: 28px "
             id="addDiv">
          <div style="width:350px;height:75px;">
            <span style="font-size: 12px;font-weight: 500;color:#4A4A4A  ">{{$t('register.address')}}</span>
            <input type="text" id="address" name="company" class="input-max" maxlength="100" disabled
                   v-model="accountInfo.companyAdd"/>
          </div>
          <div style="width:211px;height:75px;margin-left:52px;">
            <span style="font-size: 12px;font-weight: 500;color:#4A4A4A  ">{{$t('register.fixedPhone')}}</span>
            <input id="fixedPhone" type="text" name="company" class="input-max" maxlength="100" disabled
                   v-model="accountInfo.fixedPhone"/>
          </div>
        </div>
      </div>
      <!--联系人信息-->
      <div class="contacts">
        <span style="font-size: 30px">{{$t('register.contacts')}}</span>
        <div class="contacts-detail">
          <div style="width:805px;height:75px;margin-left: 45px; display:flex;flex-direction: row ">
            <div style="width:350px;height:75px;">
              <span style="font-size: 12px;font-weight: 500;color:#4A4A4A  ">{{$t('register.contactsName')}}</span>
              <input type="text" id="name" name="company" class="input-max" maxlength="100" disabled
                     v-model="accountInfo.contacts"/>
            </div>
            <div style="width:350px;height:75px;margin-left:52px;">
              <span style="font-size: 12px;font-weight: 500;color: #000000">{{$t('register.position')}}</span>
              <input type="text" id="position" name="company" class="input-max" maxlength="100" disabled
                     v-model="accountInfo.position"/>
            </div>
          </div>
          <div style="width:805px;height:75px;margin:21px 45px; display:flex;flex-direction: row ">
            <div style="width:350px;height:75px;">
              <span style="font-size: 12px;font-weight: 500;color:#4A4A4A  ">{{$t('register.email')}}</span>
              <input type="text" id="email" name="company" class="input-max" maxlength="100" disabled
                     v-model="accountInfo.email"/>
            </div>
            <div style="width:211px;height:75px;margin-left:52px;">
              <span style="font-size: 12px;font-weight: 500;color: #000000">{{$t('register.phone')}}</span>
              <input type="text" id="phone" name="mobilePhone" class="input-max" maxlength="100"
                     style="width:350px;" disabled v-model="accountInfo.mobilePhone"/>
            </div>
          </div>
        </div>
      </div>
      <!--账号信息-->
      <div class="contacts">
        <span style="font-size: 30px">{{$t('register.accountInfo')}}</span>
        <div class="contacts-detail" style="height: 125px">
          <div style="width:805px;height:75px;margin-left: 45px; display:flex;flex-direction: row ">
            <div style="width:350px;height:75px;">
              <span style="font-size: 12px;font-weight: 500;color:#4A4A4A  ">{{$t('register.account')}}</span>
              <input type="text" name="company" class="input-max" maxlength="100" disabled
                     v-model="accountInfo.account"/>
            </div>
            <div style="width:350px;height:75px;margin-left:52px;">
              <span style="font-size: 12px;font-weight: 500;color: #000000">{{$t('register.price')}}</span>
              <input type="text" name="company" class="input-max" maxlength="100" disabled
                     v-model="accountInfo.pressBalance"/>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
    import ajax from '../../common/ajax'
    import api from '../../common/api'

    let userId
    export default {
        name: "RegisterRead",
        data() {
            return {
                accountInfo: null
            }
        },
        beforeCreate() {
            document.querySelector('body').setAttribute('style', 'background:#FFFFFF')
        },
        beforeDestroy() {
            document.querySelector('body').removeAttribute('style')
        },
        created() {
            userId = this.$route.query.userId
            getInfo(this)
        }
    }

    //获取用户信息
    function getInfo(that) {
        ajax.get({
            url: api.accountName.routeName + userId,
            success(res) {
                that.accountInfo = res
                console.log(that.accountInfo)
            },
            error(e) {
                console.log(e)
            }
        })
    }

</script>

<style scoped>
  html, body {
    margin: 0;
    padding: 0;
    background: #FFFFFF;
  }

  #app {
    background-color: #FFFFFF;
  }

  .company, .contacts {
    width: 850px;
    height: 402px;
    margin: 50px auto;
  }

  .contacts {
    height: 285px;
  }

  .company-detail, .contacts-detail {
    width: 850px;
    background: #E5E5E5;
    background: rgba(0, 0, 0, 0.02);
    margin-top: 13px;
    padding-top: 17px;
    border-radius: 10px;
  }

  .company-detail {
    padding-bottom: 37px;
    height: 320px;
  }

  .contacts-detail {
    height: 225px;
  }

  .input-max, .select-221 {
    width: 348px;
    height: 49px;
    border: 1px solid #7E7E7E;
    border-radius: 5px;
    margin-top: 6px;
    background-color: #FFFFFF;
  }

  .select-221 {
    width: 211px;
    height: 51px;
    padding-left: 20px;
    font-size: 16px;
    font-family: PingFangSC-Regula;
    color: #4A4A4A
  }

  option {
    font-size: 16px;
    color: #7E7E7E;
    font-weight: 500;
  }

  input {
    text-indent: 15px;
  }

  .detail-select .el-input__inner {
    height: 50px;
    border-color: #7E7E7E;
    margin-top: 5px;
  }

</style>
